<template>
	<u-popup ref="tupian" v-model="showNotice" mode="center" border-radius="20" @close="close">
		<view class="login-wrap">
			<view class="auto-login-box u-flex u-row-center u-col-center u-flex-col">
				<button class="avatar-wrapper u-flex u-flex-col u-row-center u-col-center" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar"
					       :src="formData.avatarUrl ? formData.avatarUrl : 'https://oss.bigchun.com/uploads/20200410/default-avatar.png'">
					</image>
					<text class="loginLogoText" v-if="isShow">授权头像</text>
				</button>
				<view class="nameContent">
					<view class="title">昵称</view>
					<input name="nickName" type="nickname" placeholder="请填写昵称" class="weui-input"
					       v-model="formData.nickName"/>
				</view>
				<view class="sure-btn" @click="editUserInfo()">确定</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
/**
 * 登录提示页
 */
import FormValidate from "@/shopro/validate/form";
import schema from "@/uview-ui/libs/util/async-validator";
import wechat from "@/shopro/wechat/wechat";
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
// #ifdef APP-PLUS
import apple from "@/shopro/apple";
// #endif

export default {
	name: "shoproAuthModal",
	data() {
		return {
			
			formData:{
				nickName: '',
				avatarUrl: '',
			},
			isShow: true,
		};
	},
	props: {
		showNotice: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		...mapGetters(["initShop", "isLogin", "authType"]),
		
	},
	mounted() { },
	methods: {
		...mapActions(["getUserInfo", "showAuthModal"]),
		close() {
			this.$emit("closePopup");
		},
		// 修改信息
		editUserInfo() {
			let that = this;
			// if (!that.formData.nickName) {
			// 	this.$u.toast("昵称不能为空");
			// 	return false;
			// }
			that.$http(
				"user.profile",
				{
					nickname: that.formData.nickName,
					avatar: that.formData.avatarUrl
				},
			).then(res => {
				if (res.code === 1) {
					that.getUserInfo();
					that.close();
					that.$u.toast("保存成功");
				}
			});
		},
		//获取微信头像
		onChooseAvatar(e) {
			let that = this;
			that.formData.avatarUrl = e.detail.avatarUrl;
			that.uploadImage(that.formData.avatarUrl);
		},
		// 图片处理-上传图片
		async uploadImage(url) {
			const that = this;
			return new Promise((resolve, reject) => {
				that.$u.toast("上传中...");
				uni.uploadFile({
					url: that.$BASE_URL + "/api/common/upload",
					filePath: url,
					name: "file",
					header: { token: uni.getStorageSync("token") },
					success: res => {
						res = JSON.parse(res.data);
						
						if (res.code === 1) {
							console.log("上传成功====",res)
							that.formData.avatarUrl = res.data.fullurl;
							resolve(res.data);
						} else {
						}
					},
					complete: e => {
						uni.hideLoading();
					}
				});
			}).catch(e => {
				console.log(e);
			});
		},
	}
};
</script>

<style lang="scss" scoped>


.login-wrap {
	padding: 50rpx 34rpx;
	min-height: 400rpx;
	background-color: #fff;

	.auto-login-box {
		width: 80vw;

		.auto-login-img {
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
			margin: 0 30rpx;
		}
	}

	.agreement-box {
		margin: 80rpx auto 0;

		.protocol-check {
			transform: scale(0.7);
		}

		.agreement-text {
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;

			.tcp-text {
				color: #e9b562;
			}
		}
	}
}
.btn{
	background: linear-gradient(90deg, #e9b461, #eecc89);
	border-radius: 35rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mpwx-login {
	.avatar {
		display: inline-block;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 1px solid #eee;
		overflow: hidden;
	}
	.user-name {
		height: 40rpx;
	}
	.image {
		width: 50rpx;
		height: 50rpx;
	}
	
	.btn {
		background-color: #09BB07;
		width: 380rpx;
		margin: 80rpx auto 0;
	}
}
.avatar-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
	
	.avatar {
		height: 120rpx;
		width: 120rpx;
		border-radius: 60rpx;
		border: 1px solid #eee;
	}
}

.avatar-wrapper::after {
	border: none;
}
.nameContent {
	display: flex;
	margin: 50rpx 0;
	border-top: 1px solid #eee;
	border-bottom: 2rpx solid #eee;
	padding: 20rpx 40rpx;
	width: 90vw;
	box-sizing: border-box;
	font-size: 28rpx;
	align-items: center;
	.title {
		margin-right: 40rpx;
	}
}
.sure-btn{
	background: linear-gradient(90deg, #e9b461, #eecc89);
	border-radius: 35rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10rpx 20rpx;
	min-width: 10vw;
}
</style>
